import React from 'react'
import { Avatar } from 'antd'
import { UserOutlined } from '@ant-design/icons'
import RenderMessageType from '../RenderMessageType'
import style from './index.module.scss'
import Video from '@/assets/images/guangyu.mp4'

const messageDetailList: any[] = [
    {
        name: 'user',
        imgUrl: 'https://q6.itc.cn/q_70/images03/20240601/80b789341c9b45cb8a76238650d288a5.png',
        time: '2024.6.26',
        type: 0,
        message: 'hello world'
    },
    {
        name: 'user',
        imgUrl: 'https://q6.itc.cn/q_70/images03/20240601/80b789341c9b45cb8a76238650d288a5.png',
        time: '2024.6.26',
        type: 0,
        message: '<h1 style="color: red;">hhhhh</h1>'
    },
    {
        name: 'user',
        imgUrl: 'https://q6.itc.cn/q_70/images03/20240601/80b789341c9b45cb8a76238650d288a5.png',
        time: '2024.6.26',
        type: 0,
        message: '文本溢出测试: ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp'
    },
    {
        name: 'user',
        imgUrl: 'https://q6.itc.cn/q_70/images03/20240601/80b789341c9b45cb8a76238650d288a5.png',
        time: '2024.6.26',
        type: 1,
        message: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
    },
    {
        name: 'user',
        imgUrl: 'https://q6.itc.cn/q_70/images03/20240601/80b789341c9b45cb8a76238650d288a5.png',
        time: '2024.6.26',
        type: 2,
        message: Video
    },
    {
        name: 'user',
        imgUrl: 'https://q6.itc.cn/q_70/images03/20240601/80b789341c9b45cb8a76238650d288a5.png',
        time: '2024.6.26',
        type: 3,
        message: JSON.stringify({ fileName: '文件名1', size: 10000, fileSuffixName: 'docx' })
    },
    {
        name: 'user',
        imgUrl: 'https://q6.itc.cn/q_70/images03/20240601/80b789341c9b45cb8a76238650d288a5.png',
        time: '2024.6.26',
        type: 4,
        message: '<img src="/images/1.gif" width="65" height="65" />'
    },
    {
        name: 'user',
        imgUrl: 'https://q6.itc.cn/q_70/images03/20240601/80b789341c9b45cb8a76238650d288a5.png',
        time: '2024.6.26',
        type: 5,
        message: "# 标题 \n `hello` \n \`\`\`js app.ts \n function fun() { \n \t console.log('hello world') \n } \n \`\`\`"
    },
    {
        name: 'user',
        imgUrl: 'https://q6.itc.cn/q_70/images03/20240601/80b789341c9b45cb8a76238650d288a5.png',
        time: '2024.6.26',
        type: 5,
        message: `
| THead1          |      THead2       |           THead3 |
| :-------------- | :---------------: | ---------------: |
| text-align:left | text-align:center | text-align:right |

![Picture](https://img1.baidu.com/it/u=1179199327,1946315836&fm=253&fmt=auto&app=138&f=JPEG?w=1364&h=800)
        `
    },
    {
        name: 'user',
        imgUrl: 'https://q6.itc.cn/q_70/images03/20240601/80b789341c9b45cb8a76238650d288a5.png',
        time: '2024.6.26',
        type: 6,
        message: '<img src="/images/1.gif" width="65" height="65" />'
    },
    {
        name: 'user',
        imgUrl: 'https://q6.itc.cn/q_70/images03/20240601/80b789341c9b45cb8a76238650d288a5.png',
        time: '2024.6.26',
        type: 7,
        message: '<img src="/images/1.gif" width="65" height="65" />'
    },
    {
        name: 'user',
        imgUrl: 'https://q6.itc.cn/q_70/images03/20240601/80b789341c9b45cb8a76238650d288a5.png',
        time: '2024.6.26',
        type: 8,
        message: '<img src="/images/1.gif" width="65" height="65" />'
    },
]

const ChatDetail: React.FC = () => {
    return (
        <div className={style.messageList}>
            {/* 每条消息 */}
            {
                messageDetailList.map((item, index) => {
                    return <div className={style.messageItem} key={index}>
                        {/* info: name、id、time */}
                        <div className={style.info}>
                            <div className={style.name}>{item.name}</div>
                            <div className={style.time}>{item.time}</div>
                        </div>
                        {/* 消息详情 */}
                        <div className={style.messageDetailContent}>
                            <Avatar
                                size={42}
                                src={item.imgUrl}
                                icon={<UserOutlined />}
                                style={{ marginRight: 10, flexShrink: 0 }}
                            />
                            <div className={style.messageDetail}>
                                <RenderMessageType type={item.type} message={item.message} />
                            </div>
                        </div>
                    </div>
                })
            }
        </div>
    )
}



export default ChatDetail